<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星球介绍</title>
  <style>
    /* 
    在使用 display: inline-block; 时，元素之间会出现间距的原因通常是由于元素之间的空白符（空格、换行符等）造成的。为了解决这个问题，可以采取以下几种方法之一： 
    
      1. 在HTML代码中，将元素之间的空白符去除或者减少，以消除间距。 
      2. 将元素之间的空白符注释掉，例如： <div></div><!--注释--><div></div> 。 
      3. 将父元素的 font-size 设置为 0 ，然后再将子元素的 font-size 设置为需要的大小，这样可以消除间距。 
      4. 使用负边距来消除间距，例如： margin-right: -4px; 。 
      5. 使用Flexbox布局或者Grid布局代替 inline-block ，这样可以更灵活地控制元素的布局和间距。 
    
    补充: vertical-align 是CSS属性，用于控制元素内部文本或内联元素在垂直方向上的对齐方式。以下是关于 vertical-align 属性的总结： 
 
    1.  vertical-align: baseline; ：默认值，元素的基线与父元素的基线对齐。 
    2.  vertical-align: top; ：元素的顶部与父元素的顶部对齐。 
    3.  vertical-align: middle; ：元素的中部与父元素的中部对齐。 
    4.  vertical-align: bottom; ：元素的底部与父元素的底部对齐。 
    5.  vertical-align: text-top; ：元素的顶部与父元素的文本顶部对齐。 
    6.  vertical-align: text-bottom; ：元素的底部与父元素的文本底部对齐。 
    7.  vertical-align: sub; ：垂直对齐到父元素的下标基线。 
    8.  vertical-align: super; ：垂直对齐到父元素的上标基线。 
    通过设置 vertical-align 属性，可以控制元素内部文本或内联元素在垂直方向上的对齐方式，使页面布局更加灵活和精确。
    */
    body {
      font-size: 0;
    }
    h1 {
      font-size: 30px;
    }
    .item {
      font-size: 20px;
      width: 500px;
      background-color: skyblue;
      /* 1.改变元素的特性和垂直方向的布局 */
      display: inline-block;
      vertical-align: top;
      /* 2.使用浮动 */
      /* float: left; */
    }

    .item .album {
      width: 100%;
    }

    .item p .keyword {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      background-color: #000;
    }
    
  </style>
</head>
<body>

  <h1>星球介绍</h1>

  <!-- 木星 -->
  <div class="item">
    <h2>木星</h2>
    <img src="../../images/muxing.jpg" alt="木星" class="album">
    <p>
      <span class="keyword">木星(Jupiter)</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
    </p>
  </div>
  
  <!-- 地球 -->
  <div class="item">
    <h2>地球</h2>
    <img class="album" src="../../images/diqiu.jpg" alt="地球">
    <p>
      <span class="keyword">地球(Earth)</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1]  它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
    </p>
  </div>
</body>
</html>